<template>
  <div class="teacher-dashboard">
    <!-- Hero Section -->
    <div class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title">教学仪表板</h1>
        <p class="hero-subtitle">管理您的课程，跟踪学生进度，创造精彩的学习体验</p>
        <router-link to="/teacher/courses/create" class="btn btn-primary hero-cta">
          <span class="modern-icon">➕</span>
          创建新课程
        </router-link>
      </div>
      <div class="hero-image">
        <img :src="heroSvg" alt="教学插图" class="hero-illustration" />
      </div>
    </div>

    <!-- Quick Stats -->
    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-icon" style="background-color: #3b82f6;">
          <span class="modern-icon">📚</span>
        </div>
        <div class="stat-content">
          <h3 class="stat-number">{{ stats.totalCourses }}</h3>
          <p class="stat-label">我的课程</p>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon" style="background-color: #8b5cf6;">
          <span class="modern-icon">👥</span>
        </div>
        <div class="stat-content">
          <h3 class="stat-number">{{ stats.totalStudents }}</h3>
          <p class="stat-label">学生总数</p>
        </div>
      </div>



      <div class="stat-card">
        <div class="stat-icon" style="background-color: #f59e0b;">
          <span class="modern-icon">⭐</span>
        </div>
        <div class="stat-content">
          <h3 class="stat-number">{{ stats.avgRating }}</h3>
          <p class="stat-label">平均评分</p>
        </div>
      </div>
    </div>

    <!-- Recent Activity & Quick Actions -->
    <div class="dashboard-content">
      <div class="content-left">
        <!-- Recent Courses -->
        <div class="card">
          <div class="card-header">
            <h3>最近的课程</h3>
            <router-link to="/teacher/courses" class="view-all-link">查看全部</router-link>
          </div>
          <div class="card-body">
            <div v-if="recentCourses.length === 0" class="empty-state">
              <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="var(--gray-400)">
                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
              </svg>
              <p>您还没有创建任何课程</p>
              <router-link to="/teacher/courses/create" class="btn btn-secondary">创建第一个课程</router-link>
            </div>
            <div v-else class="course-list">
              <div v-for="course in recentCourses" :key="course.id" class="course-item">
                <img :src="course.coverImageUrl || '/placeholder-course.jpg'" :alt="course.title" class="course-thumb">
                <div class="course-info">
                  <h4 class="course-title">{{ course.title }}</h4>
                  <p class="course-meta">{{ course.enrollmentCount }} 名学生 · {{ course.status === 'PUBLISHED' ? '已发布' : '草稿' }}</p>
                </div>
                <div class="course-actions">
                  <router-link :to="`/teacher/courses/${course.id}/edit`" class="btn btn-secondary btn-sm">编辑</router-link>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Recent Exams Performance -->
        <div class="card" v-if="recentExams.length">
          <div class="card-header">
            <h3>近期考试表现</h3>
            <router-link to="/teacher/exam-management" class="view-all-link">前往管理</router-link>
          </div>
          <div class="card-body exam-perf-list">
            <div v-for="ex in recentExams" :key="ex.id" class="exam-perf-item">
              <div class="exam-title">{{ ex.title }}</div>
              <div class="muted">总分 {{ ex.totalPoints }}</div>
              <div>
                平均分：{{ examStatsMap[ex.id]?.averageScore ?? '-' }}
              </div>
              <div>
                通过率：{{ examStatsMap[ex.id]?.passRate ?? '-' }}%
              </div>
              <div class="muted">
                参与：{{ examStatsMap[ex.id]?.participantCount ?? 0 }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="content-right">
        <!-- Quick Actions -->
        <div class="card">
          <div class="card-header">
            <h3>快捷操作</h3>
          </div>
          <div class="card-body">
            <div class="quick-actions">
              <router-link to="/teacher/courses/create" class="quick-action">
                <div class="action-icon" style="background-color: #3b82f6;">
                  <span class="modern-icon">➕</span>
                </div>
                <span>创建课程</span>
              </router-link>

              <router-link to="/teacher/courses" class="quick-action">
                <div class="action-icon" style="background-color: #8b5cf6;">
                  <span class="modern-icon">📚</span>
                </div>
                <span>管理课程</span>
              </router-link>

              <router-link to="/teacher/question-bank" class="quick-action">
                <div class="action-icon" style="background-color: #f59e0b;">
                  <span class="modern-icon">🗄️</span>
                </div>
                <span>题库管理</span>
              </router-link>

              <router-link to="/teacher/exam-management" class="quick-action">
                <div class="action-icon" style="background-color: #8b5cf6;">
                  <span class="modern-icon">📋</span>
                </div>
                <span>考试管理</span>
              </router-link>

              
            </div>
          </div>
        </div>

        <!-- Tips Card -->
        <div class="card tips-card">
          <div class="card-header">
            <h3>教学小贴士</h3>
          </div>
          <div class="card-body">
            <div class="tip-item">
              <div class="tip-icon">💡</div>
              <div class="tip-content">
                <h4>优质课程内容</h4>
                <p>结构清晰的课程大纲和丰富的互动内容能显著提升学生满意度。</p>
              </div>
            </div>
            <div class="tip-item">
              <div class="tip-icon">🎯</div>
              <div class="tip-content">
                <h4>学习目标明确</h4>
                <p>为每个章节设置明确的学习目标，帮助学生更好地理解课程价值。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { courseApi } from '@/api/course'
import { examApi, type Exam, type ExamStats } from '@/api/exam'
import { getErrorMessage } from '@/api/http'
import heroSvg from '@/assets/unicron.svg'

// 统计数据
const stats = ref({
  totalCourses: 0,
  totalStudents: 0,
  avgRating: '5.0'
})

// 最近的课程
const recentCourses = ref<any[]>([])

// 最近考试与统计
const recentExams = ref<Exam[]>([])
const examStatsMap = ref<Record<number, ExamStats>>({} as any)

// 加载统计数据
const loadStats = async () => {
  try {
    // 加载教师的课程
    const response = await courseApi.getTeacherCourses({ page: 1, pageSize: 5 })
    recentCourses.value = response.content || []
    stats.value.totalCourses = response.totalElements || 0
    
    // 计算总学生数
    const totalStudents = recentCourses.value.reduce((sum, course) => sum + (course.enrollmentCount || 0), 0)
    stats.value.totalStudents = totalStudents
    
    // 计算平均评分
    const avgRating = recentCourses.value.length > 0 
      ? (recentCourses.value.reduce((sum, course) => sum + (course.averageRating || 5), 0) / recentCourses.value.length).toFixed(1)
      : '5.0'
    stats.value.avgRating = avgRating
    
  } catch (error) {
    console.error('Failed to load teacher stats:', error)
  }

  // 加载近期考试（已发布）
  try {
    const examsRes = await examApi.search({ page: 1, pageSize: 5, status: 'PUBLISHED' })
    recentExams.value = examsRes.content || []
    // 并行加载统计
    await Promise.all(
      recentExams.value.map(async (ex) => {
        try {
          const s = await examApi.getStats(ex.id)
          examStatsMap.value[ex.id] = s
        } catch (e) {
          console.warn('load stats failed', e)
        }
      })
    )
  } catch (error: any) {
    ElMessage.warning('近期考试加载失败：' + getErrorMessage(error))
  }
}

// 已移除数据分析与设置占位

onMounted(() => {
  loadStats()
})
</script>

<style scoped>
/* CSS变量定义 */
:root {
  --primary-color: #3b82f6;
  --secondary-color: #8b5cf6;
  --warning-color: #f59e0b;
  --success-color: #10b981;
  --gray-100: #f3f4f6;
  --gray-300: #d1d5db;
  --gray-500: #6b7280;
  --gray-900: #111827;
  --white: #ffffff;
  --primary-dark: #1d4ed8;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --text-primary: #1f2937;
  --border-light: #e5e7eb;
  --border-medium: #d1d5db;
  --gray-50: #f9fafb;
  --gray-400: #9ca3af;
  --bg-secondary: #f8fafc;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-sm: 0.375rem;
  --transition-fast: 0.15s ease-in-out;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.12);
  --line-height-relaxed: 1.6;
}
.teacher-dashboard {
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--space-6);
  background-color: var(--bg-secondary);
  min-height: 100vh;
}

.hero-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color) 100%);
  border-radius: 24px;
  padding: 32px;
  margin-bottom: 24px;
  color: white;
}

.hero-content {
  flex: 1;
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 2;
}

.hero-title {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 12px;
  color: #0f172a;
}

.hero-subtitle {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-6);
  color: #475569;
}

.hero-cta {
  background-color: white;
  color: var(--primary-color);
  border: none;
}

.hero-cta:hover {
  background-color: var(--gray-100);
  color: var(--primary-dark);
}

.hero-image {
  flex-shrink: 0;
  margin-left: var(--space-8);
  position: relative;
  z-index: 1;
}

.hero-illustration {
  width: 300px;
  height: 200px;
  display: block;
  border-radius: 12px;
  object-fit: cover;
  background: linear-gradient(135deg, #e0e7ff, #f0f9ff);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.stat-card {
  background: var(--white);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.stat-number {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-1) 0;
  color: var(--text-primary);
}

.stat-label {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
}

.dashboard-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-8);
}

/* 近期考试表现 */
.exam-perf-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.exam-perf-item {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.6fr 0.6fr 0.6fr;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.exam-title {
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.muted {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  margin-bottom: var(--space-6);
}

.card-header {
  padding: var(--space-6) var(--space-6) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin: 0;
  color: var(--text-primary);
}

.view-all-link {
  color: var(--primary-color);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.view-all-link:hover {
  text-decoration: underline;
}

.card-body {
  padding: var(--space-6);
}

.empty-state {
  text-align: center;
  padding: var(--space-8);
  color: var(--text-secondary);
}

.empty-state p {
  margin: var(--space-4) 0;
}

.course-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.course-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.course-item:hover {
  background-color: var(--gray-50);
  border-color: var(--border-medium);
}

.course-thumb {
  width: 60px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.course-info {
  flex: 1;
}

.course-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  margin: 0 0 var(--space-1) 0;
  color: var(--text-primary);
}

.course-meta {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
}

.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-4);
  text-decoration: none;
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.quick-action:hover {
  background-color: var(--gray-50);
  border-color: var(--border-medium);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.action-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-bottom: var(--space-2);
}

.tips-card .card-body {
  padding: var(--space-4);
}

.tip-item {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.tip-item:last-child {
  margin-bottom: 0;
}

.tip-icon {
  font-size: var(--font-size-xl);
}

.tip-content h4 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-1) 0;
  color: var(--text-primary);
}

.tip-content p {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin: 0;
  line-height: var(--line-height-relaxed);
}

@media (max-width: 1024px) {
  .dashboard-content {
    grid-template-columns: 1fr;
  }
  
  .hero-section {
    flex-direction: column;
    text-align: center;
    padding: var(--space-8);
  }
  
  .hero-image {
    margin-left: 0;
    margin-top: var(--space-6);
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .hero-title {
    font-size: var(--font-size-2xl);
  }
  
  .quick-actions {
    grid-template-columns: 1fr;
  }
}
/* 现代化图标样式 */
.modern-icon {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  margin-right: 8px;
}

/* 按钮中的图标样式 */
.btn .modern-icon {
  font-size: 16px;
  margin-right: 6px;
}

/* 基础按钮样式 */
.btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.hero-cta {
  padding: 16px 32px;
  font-size: 18px;
  border-radius: 12px;
}

</style>
